<template>
	<view class="video-list">
		<view class="swiper-box">
			<swiper class="swiper" :vertical="true" @animationfinish='swiperChange' :circular="false" :current="swiperCurrent" >
				<swiper-item  v-for="(item,index) in videoArray" :key='item.id'  :item-id="''+item.idKey" >
						<view class="swiper-item" @click.stop="tabVideo">
							<video 
							v-if="index==swiperCurrent"
							:item-id="item.index"
							test = 'test1'
							:show-center-play-btn="false" 
							:controls="false" 
							objectFit="cover" 
							:circular="true"
							:id="'video'+index" class="video-box" :src="item.video_url" :loop="true" autoplay="true">
							</video>
							<view></view>
<!-- 							<video :controls="false" :id="'video'+index" class="video-box" :src="item.video_url" :loop="true" v-if="index==swiperCurrent" objectFit="cover" :item-id="item.index" autoplay="true">
								<cover-view class="boxCeshiRight">
									right{{index}}
								</cover-view>
								<cover-view class="boxCeshiLeft">
									left
								</cover-view>
							</video> -->
				<!-- 			<view v-else>
								<image class="queshen" src="https://dsx.cdzer.com/uploads/logo_bgk.jpg"></image>
							</view> -->
						</view>
				</swiper-item>
				
			</swiper>
		    <view class="videoLogo flex flex-alignItems flex-justifyCenter" v-if="playStatus" @click.stop="tabVideo">
			<image class="play" src="../../static/images/player_index.png"></image>
		    </view>
		</view>
	</view>
</template>

<script>
	// import videoPlayer from "./videoPlayer.vue";
	import listLeft from "./listLeft.vue";
	import listRight from "./listRight.vue";
	import * as utils from '../../utils/index.js'
	import Queue from '../../utils/queue.js'
	export default {
		components: {
			// videoPlayer,
			listLeft,
			listRight
		},
		props:[
			'cateId',
			'area',
			'videoArray',
			'playIndex',
			'isFlag',
			'allList'
		],
		onShow() {
			console.log('onshow')
		},
		data() {
			return {
				baseUrl: getApp().globalData.baseUrl,
				// videoList: [],
				currentPage: 0,
				isPause: false,
				isComment: false,
				rightBox:true,
				userInfo:{},
				page:1,
				isFlow:false,
				location: {},
				// playIndex:0,
				videoInfo:{ // 当前视频播放的数据
					// index: 0
				},
				current:0 ,// 滑块
				playStatus:false ,// 视频状态
				videoObjList:{
					0:{
						index: '0'
					},
					1:{
						index:'1'
					},
					2:{
						index: '2'
					}
				},
				paging:{
					page:1,
					size:9
				},
				circular:true,
				videoList:[],
				swiperCurrent:0
			}
		},
		onReady() {
			
		},
		
		mounted() {
			// console.log(this.allList,"allList")
			this.pageStatus = 0 // 页面初始状态
			this.videoKey  = 'video'
			this.videoList = []//渲染的视频
			this.residueVideoList = []//取余的数组
			// console.log('playIndex',this.playIndex)
			this.videoIndex = this.playIndex || 0// 当前视频的位置
			this.loadingVideo = 0
			this.current = this.videoIndex%3
			// console.log('current',this.current)
			// console.log(this.videoObj0)
			this.getVideoList()
			this.userInfo = this.$store.getters.getuserInfo
			// #ifdef MP-WEIXIN
			// utils.authorizedPositioning((msg,res)=>{
			// 	if(msg == 'Authorized'){
			// 		console.log(msg)
			// 		console.log(res)
			// 		console.log('chufa')
			// 		this.location = res
			// 		this.$store.commit('setLocation',res)
			// 		// this.getList(1)
			// 	}else{
					
			// 	}
			
			// })
			// #endif
			//  #ifndef  MP-WEIXIN 
				// this.getList(1)
			// #endif 
		},
		watch:{
			cateId(id){
				this.isFlow = false
				this.videoList= []
				// this.getList(1)
			},
			videoIndex(index){
				console.log('index',index)
				
				// this.videoIndex = index
			},
			videoArray(array){
				// console.log(array,"传进来的数组嘛")
				if(array.length!=0){
					this.getVideoList()
				}
				
			},
			playStatus(playStatus){
				console.log('-----------'+playStatus)
			},
			area(area){
				console.log(area)
				this.location = area
				this.isFlow = false
				// this.videoList= []
				// this.getList(1)
			},
			isFlag(isFlag){
				
			}
		},
		methods: {
			setLike(like){
				console.log('触发',like)
				this.videoInfo.is_like = like.islike
				this.videoInfo.praise_num = like.praise_num
			},
			navPause(e){
				console.log(e)
			},
			swiperChange(e) {
				  let oldCurrent = this.swiperCurrent
				  this.swiperCurrent = e.detail.current
				  // console.log(this.videoList[)
				  this.videoInfo = this.videoList[e.detail.current] 
				  // this.pauseVideo(this.getVideoObj(this.videoKey,oldCurrent))
				  const playObj = this.getVideoObj(this.videoKey,e.detail.current)
				
				  this.playVideo(playObj)
				  this.playStatus = false
			  },
			 // 获取视频列表
			getVideoList(){
				// console.log(this.videoList,"视频列表")
				// 1.截取数组中的三个元素作为 0 1 2 
				// 2.拿到allList 和当前索引值 确定当前nowVideo Index
				
				let allList = this.allList,// 父节点返回的所有视频列表
					pageList = this.videoArray,// 新增的视频列表
					playIndex = parseInt(this.playIndex), // 播放视频的索引
					videoList  = this.videoList, // 当前页面播放的视频列表
					current  = 0
					let newVal =pageList
					// 拿到视频长度
					if(newVal.length){
						newVal.map((item,index)=>{
							return item.idKey = index+1
						})
						// console.log(newVal.length)
						if(videoList.length ==0){
							// console.log('111')
							// this.videoListChange(newVal)
							this.videoList = this.videoList.concat(newVal)
						}else{
							// console.log(222)
							let arr = JSON.parse(JSON.stringify(newVal))
							let nextArr = arr.splice(this.total)
							
							this.nextQueue.push(...nextArr)
						}
					}
					// this.playIndex =
					// console.log(newVal)
					// this.videoListChange(newVal)
					this.swiperCurrent = playIndex
					this.total = newVal.length
					this.videoInfo = this.videoList[playIndex]
					const playObj = this.getVideoObj(this.videoKey,playIndex)
					this.playVideo(playObj)
			  
			},
			currentPlay(oldCurrent, current) {
			    // 获取上一个视频实例
			    const oldVideoObj = this.getVideoObj(this.videoKey, oldCurrent)
			
			    // 暂停上一个视频实例
			    this.pauseVideo(oldVideoObj)
			
			    // 获取当前视频实例
			    const videoObj = this.getVideoObj(this.videoKey, current)
				console.log(videoObj)
			    // 播放当前视频实例
			    this.playVideo(videoObj)
			  },

			   tabVideo(e) {
				   console.log(e)
			      // let playStatus = this.playStatus
			      let current = this.swiperCurrent
			      // 获取当前视频实例
			      const videoObj = this.getVideoObj(this.videoKey, current)
				  console.log(this.playStatus)
			      if (this.playStatus == false) {
					  // console.log('暂停')
			        // 播放停视频实例
			        this.pauseVideo(videoObj)
					this.playStatus  = true
			      } else {
					  // console.log('播放')
			        // 播放当前视频实例
			        this.playVideo(videoObj)
					this.playStatus  = false
			      }
			      // this.playStatus = !this.playStatus
				  // console.log(this.playStatus)
			    },
			   // 视频开始播放
			   eventPlay() {
				   // console.log('执行播放')
			     this.playStatus = false
			      
			   },
			   // 播放视频
			   playVideo(videoObj) {
				   // console.log('执行播放')
					videoObj.play()
			   },
			   // 暂停视频
			   pauseVideo(videoObj) {
				   // console.log(videoObj)
				videoObj.pause()
			   },
			   // 销毁实例
			   deleteVideoObJ(videoObj) {
			     videoObj.stop()
			   },
			   sendMsg(e){
			                //func: 是父组件指定的传数据绑定的函数，this.msg:子组件给父组件传递的数据
			                this.$emit('func',e)
			            },

			   // 获取视频实例
			   getVideoObj(key, index) {
				    console.log(index,"视频index")
				   const id = key+index  
				   if(index == 9){
					   this.sendMsg(2)
					   console.log(key, index,"sadasd",this.videoArray,this.videoList)
				   }else if(index == 19){
					   this.sendMsg(3)
					    console.log(key, index,"wwwwaaaadddd",this.videoArray,this.videoList)
				   }
			     return uni.createVideoContext(id,this)
			   },
			formArrayVideo(oldList=[],residueList = [],newList= [],itemNumber = 3){
			  // 原数组
			  let onwList = oldList.concat(residueList,newList)
			  // 倍数
			  const ints = Math.floor(onwList.length/itemNumber)
			  // 最新数组
			  const list = onwList.slice(0,ints * itemNumber)||[]
			  // 缓存剩下的数组
			  const residue = onwList.slice(ints * itemNumber,onwList.length) || []
			  
			  if(list.length<1){
				  return {
					  list: onwList,
					  residue:[]
				  }
			  }else{
				  return{
					  list,
					  residue
				  }
			  }
			  
			},
			setFollow(id){
				console.log(id,"别搞我心态啊")
				this.$emit('setFollow',id)
			},
			openLeft(){
				// console.log(this.$refs.rightBox)
				// this.$refs.rightBox.style.zIndex = 100
				this.rightBox = !this.rightBox
			},
			
			// 双击点赞
			follow(index) {
				this.$refs.listRight[index].handleFollow();
			},
			// 开启旋转动画
			playAnimate(index) {
				this.isPause = false
				// this.$refs.listRight[index].playAnimate();
			},
			// 暂停旋转动画
			pauseAnimate(index) {
				this.isPause = true
				// this.$refs.listRight[index].pauseAnimate();
			},
			clickPlay() {
				// console.log('点击')
				this.isPause = false
				// this.$refs.listRight[this.currentPage].playAnimate();
				this.$refs.players[this.currentPage].play();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.right-box {
		position: absolute;
		bottom: 5vh;
		right: 0rpx;
		z-index: 200;
	}
	.video-box{
		width: 100%;
		margin-top: 20rpx;
		height: 600rpx;
		margin-top: 300upx;
	}
.video {
		width: 100%;
		height: 100%;
		z-index: 100;
	}
	.queshen{
		width: 100%;
		height: 100vh;
	}
	.center-box {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		font-size: 70rpx;
		text-align: center;
		line-height: 100rpx;
		color: #FFF;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background: rgba(255, 255, 255, .15);
		z-index: 200;
		.cuIcon-stop{
			margin-left: 12rpx;
			width: 46rpx;
			height: 52rpx;
		}
	}

	.left-box {
		position: absolute;
		bottom:55rpx;
		left: 20rpx;
		z-index: 200;
	}

	.video-list {
		width: 100%;
		height: 100%;
	}

	.swiper-box {
		height: 100%;
		width: 100%;
	}

	.swiper {
		height: 100%;
		width: 100%;
	}

	.swiper-item {
		width: 100%;
		height: 100%;
		position: relative;
		.boxCeshiRight{
			position: absolute;
			bottom: 500rpx;
			right: 50rpx;
			width: 100rpx;
			height: 100rpx;
			background-color: #fff;
		}
		.boxCeshiLeft{
			position: absolute;
			bottom: 500rpx;
			left: 50rpx;
			width: 100rpx;
			height: 100rpx;
			background-color: #fff;
		}
	}

	.container {
		height: 100vh;
		width: 100%;
		text-align: center;
		display: flex;
		flex-direction: row;
		padding-top: 500rpx;
		background-color: #FFF;

		.image {
			width: 300rpx;
			height: 300rpx;
		}

		.content {
			display: inline-block;
			height: 300rpx;
			padding-top: 100rpx;
			font-size: 44rpx;
			flex: 1;
		}

	}
	.videoLogo {
	  width: 100vw;
	  height: 100vh;
	  position: fixed;
	  background: rgba(0, 0, 0, 0.3);
	  left: 0;
	  top: 0;
	  z-index: 10;
	  pointer-events: none;
	}
	
	.videoLogo .play {
	  width: 46rpx;
	  height: 52rpx;
	  position: absolute;
	  left: 50%;
	  top: 50%;
	  transform: translate(-50%,-50%);
	}
</style>
